<template>
  <div class="demo-container">
    <!-- 面包屑导航 -->
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
      <el-breadcrumb-item>库区</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    
    <!-- 条件查询区域 -->
    <el-card class="card search-card" shadow="hover">
      <el-form :model="searchForm" :inline="true" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="searchForm.name" placeholder="请输入名称" clearable style="width: 200px"/>
        </el-form-item>
        
        <el-form-item label="类型">
          <el-select v-model="searchForm.type" placeholder="请选择类型" clearable style="width: 200px">
            <el-option label="类型一" value="type1" />
            <el-option label="类型二" value="type2" />
            <el-option label="类型三" value="type3" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 200px">
            <el-option label="启用" value="active" />
            <el-option label="禁用" value="inactive" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="日期">
          <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" 
            start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" 
            value-format="YYYY-MM-DD" style="width: 300px"/>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作和内容区域 -->
    <el-card class="card content-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>数据列表</span>
          <div class="operation-buttons">
            <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>新增</el-button>
            <el-button type="success" @click="handleExport"><el-icon><Download /></el-icon>导出</el-button>
            <el-button type="warning" @click="handleBatchDelete" :disabled="!hasSelection">
              <el-icon><Delete /></el-icon>批量删除
            </el-button>
          </div>
        </div>
      </template>
      
      <!-- 数据表格 -->
      <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange" 
        border stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" min-width="120" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
              {{ row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>编辑
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页区域 -->
    <el-card class="card pagination-card" shadow="hover">
      <div class="pagination-container">
        <div class="pagination-info">
          <span>共 {{ total }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, total) }} 条</span>
        </div>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]" :total="total" 
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Download } from '@element-plus/icons-vue'

// 搜索表单数据
const searchForm = reactive({ name: '', type: '', status: '', dateRange: [] })

// 定义表格数据类型
interface TableItem {
  id: number;
  name: string;
  type: string;
  status: string;
  createTime: string;
  description: string;
}

// 表格数据 - 添加正确的类型声明
const tableData = ref<TableItem[]>([]);
const loading = ref(false);
const selectedRows = ref<TableItem[]>([]);
const hasSelection = ref(false);

// 分页数据
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 模拟数据
const mockData: TableItem[] = [
  { id: 1, name: '示例数据1', type: 'type1', status: 'active', createTime: '2024-01-01 10:00:00', description: '这是一个示例数据描述' },
  { id: 2, name: '示例数据2', type: 'type2', status: 'inactive', createTime: '2024-01-02 11:00:00', description: '这是另一个示例数据描述' },
  { id: 3, name: '示例数据3', type: 'type3', status: 'active', createTime: '2024-01-03 12:00:00', description: '第三个示例数据描述' }
]

// 工具函数
const getTypeTagType = (type:string): string=> ({ type1: 'primary', type2: 'success', type3: 'warning' }[type] || 'info')
const getTypeLabel = (type:string): string=> ({ type1: '类型一', type2: '类型二', type3: '类型三' }[type] || '未知')

// 数据加载
const loadData = async () => {
  loading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    tableData.value = mockData
    total.value = mockData.length
  } catch (error) {
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}

// 事件处理
const handleSearch = () => { currentPage.value = 1; loadData() }
const handleReset = () => { Object.assign(searchForm, { name: '', type: '', status: '', dateRange: [] }); handleSearch() }
const handleAdd = () => ElMessage.info('点击了新增按钮')
const handleExport = () => ElMessage.success('导出功能')
const handleSelectionChange = (selection:any) => { selectedRows.value = selection; hasSelection.value = selection.length > 0 }
const handleSizeChange = (size:any) => { pageSize.value = size; currentPage.value = 1; loadData() }
const handleCurrentChange = (page:any) => { currentPage.value = page; loadData() }

// 编辑和删除操作
const handleEdit = (row:any) => ElMessage.info(`编辑数据：${row.name}`)
const handleDelete = (row:any) => {
  ElMessageBox.confirm(`确定要删除数据"${row.name}"吗？`, '确认删除', {
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
  }).then(() => { ElMessage.success('删除成功'); loadData() })
}

// 批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 条数据吗？`, '确认删除', {
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
  }).then(() => { ElMessage.success('批量删除成功'); loadData() })
}

onMounted(loadData)
</script>

<style scoped>
/* 基础容器样式 */
.demo-container {
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #1a1a2e 75%, #16213e 100%);
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(66, 165, 245, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(92, 107, 192, 0.1) 0%, transparent 50%);
  min-height: 100vh;
  position: relative;
}

/* 纹理背景 */
.demo-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

.demo-container > * {
  position: relative;
  z-index: 1;
}

/* 卡片通用样式 */
.card {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* 页头和操作区 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation-buttons {
  display: flex;
  gap: 10px;
}

/* 分页区域 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-card) {
  border-radius: 12px;
  transition: all 0.3s ease;
}

:deep(.el-card:hover) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(235, 238, 245, 0.5);
  background: rgba(248, 249, 250, 0.5);
  border-radius: 12px 12px 0 0;
}

:deep(.el-table) {
  margin-top: 10px;
  background: transparent;
}

:deep(.el-table__header-wrapper) {
  background: rgba(64, 158, 255, 0.1);
}

:deep(.el-table__body-wrapper) {
  background: transparent;
}

:deep(.el-breadcrumb__inner) {
  color: #2c3e50;
  font-weight: 500;
}

:deep(.el-breadcrumb__inner:hover) {
  color: #409EFF;
}
</style>
